<template>
	<view class="mask flex-box align-center flex-center" @click="cancel">
		<view class="model flex-box" @click.stop>
			<view class="title"> {{title}} </view>
			<view class="info">{{ info }}</view>
			<view class="flex"></view>
			<view class="btn flex-box">
				<view class="cancel" @click="cancel">{{ cancelTxt?cancelTxt:'取消' }}</view>
				<view class="ok" @click="ok">{{ okTxt?okTxt:'确定' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['title','info','cancelTxt','okTxt'],
		methods:{
			cancel(){
				this.$emit('cancel')
			},
			ok(){
				this.$emit('ok')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.model{
		background-color: #FFFFFF;
		border-radius: $border-radius-base;
		width: 600rpx;
		overflow: hidden;
		min-height: 300rpx;
		flex-direction: column;
		padding-top: 20rpx;
		.title{
			padding: 30rpx 30rpx 20rpx 30rpx;
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
			line-height: 46rpx;
		}
		.info{
			text-align: center;
			color: #999999;
			font-size: 24rpx;
			padding: 0 20rpx 30rpx;
		}
		.btn{
			view{
				flex: 1;
				text-align: center;
				line-height: 100rpx;
			}
			.cancel{
				color: #999999;
				border-top: 1px solid #eeeeee;
			}
			.ok{
				background-color: $uni-color-primary;
				color: white;
			}
		}
	}
</style>
